<template>
  <!-- 应用及模块接入 -->
  <div class="applications">
    <basic-container>
      <SearchCondition
        ref="searchCondition"
        class="search-condition"
        :has-batch="true"
        :show-label="true"
        :condition-list="conditionList"
        :is-back="isBack"
        @searchData="searchData"
      />
    </basic-container>
    <basic-container>
      <div class="flex-box">
        <div class="search-tips">共搜索到{{ total }}条数据</div>
        <el-button type="primary" :size="'small'" @click="add">新增</el-button>
        <el-button :size="'small'" @click="$refs.sortDialog.setDialogVisible (true)">排序</el-button>
      </div>
      <YituTable
        class="tree-table"
        border
        :loading="loading"
        :table-obj="tableObj"
        :data="tableData"
        :current-page="queryParams.pageIndex"
        :page-size="queryParams.pageSize"
      >
        <!-- 应用图标 -->
        <template #icon="{ customHtmlObj: { row } }">
          <!-- <img v-if=" row.icon" :src="imgBaseUrl + row.icon" alt="" style="width: 30px;height: 30px;"> -->
          <TokenImg v-if=" row.icon" :img-url="imgBaseUrl + row.icon" style="width: 30px;height: 30px;" />
          <span v-else>{{ '' }}</span>
        </template>
        <!-- 接入状态 -->
        <template #statusStr="{ customHtmlObj: { row } }">
          <span class="have-icon" :class="row.statusStr==='启用'?'green-icon':'red-icon'">{{ row.statusStr }}</span>
        </template>
        <template #before-table-button="{ beforeTableButton: { row } }">
          <div style="text-align:center">
            <el-button type="text" class="common-btn c-blue" size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button v-show="row.statusStr === '启用'" class="common-btn c-blue" type="text" size="mini" @click="handleStatus(row,0)">禁用</el-button>
            <el-button v-show="row.statusStr === '禁用'" class="common-btn c-blue" type="text" size="mini" @click="handleStatus(row,1)">启用</el-button>
          </div>
        </template>
      </YituTable>
      <pagination
        v-show="isPagination"
        ref="pagination"
        :total="total"
        :page="queryParams.pageIndex"
        :limit="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @pagination="paginationChange"
      />
      <ConfirmDialog ref="dialog" content="确认是否禁用该应用及模块？" :is-unable="true" @confirm="statusChange(params)" @cancel="$refs.dialog.setDialogVisible(false)" />
      <sortDialog ref="sortDialog" :app-set-list="conditionList[0].options" @closed="resetCondition" />
    </basic-container>

  </div>
</template>
<script>

import ConfirmDialog from '@/components/common/ConfirmDialog'
import sortDialog from '@/components/common/sortDialog'
import { list, enable, app, appSet } from '@/api/appAndModule/index.js'
import TokenImg from '@/components/common/TokenImg.vue'
export default {
  name: 'Applications',
  components: { ConfirmDialog, sortDialog, TokenImg },
  data() {
    return {
      // 是否显示分页
      isPagination: true,
      loading: false,
      conditionList: [
        {
          label: '接入应用集',
          value: 'appSetId',
          type: 'select',
          placeholder: '请选择',
          filterable: true,
          defaultValue: null,
          options: []
        },
        {
          label: '所属应用',
          value: 'appId',
          type: 'select',
          placeholder: '请选择',
          filterable: true,
          defaultValue: null,
          options: []
        },
        {
          label: '所属模块',
          value: 'accessName',
          type: 'input',
          placeholder: '请输入内容',
          defaultValue: null
        },
        {
          label: '接入状态',
          value: 'status',
          type: 'select',
          placeholder: '请选择',
          filterable: true,
          defaultValue: null,
          options: [
            { label: '启用', value: 1 },
            { label: '禁用', value: 0 }
          ]
        }
      ],
      tableObj: {
        tableHead: [
          {
            label: '接入应用集',
            value: 'appSetName',
            align: 'left',
            headerAlign: 'left'
          },
          {
            label: '应用图标',
            value: 'icon',
            align: 'center',
            headerAlign: 'left',
            editType: 'custom',
            customName: 'icon'
          },
          {
            label: '所属应用',
            value: 'appName',
            align: 'left'
          },
          {
            label: '所属模块',
            value: 'accessName',
            align: 'left',
            headerAlign: 'left'
          },
          {
            label: '接入状态',
            value: 'statusStr',
            align: 'center',
            headerAlign: 'center',
            editType: 'custom',
            customName: 'statusStr'
          },
          {
            label: '接入创建人',
            value: 'createUser',
            align: 'center',
            headerAlign: 'center'
          },
          {
            label: '创建时间',
            value: 'createDate',
            align: 'center',
            headerAlign: 'center'
          }
        ],
        indexAlign: 'center',
        handleWidth: 148,
        isSelection: false,
        hasEditButton: false,
        isHasIndex: true,
        hasDeleteButton: false
      },
      // 总条数
      total: 0,
      // 启用/禁用参数
      params: {
        id: '',
        status: ''
      },
      // 查询参数
      queryParams: {
        'accessName': '',
        'appId': '',
        'appSetId': '',
        'pageIndex': 1,
        'pageSize': 10,
        'status': ''
      },
      Form: {},
      tableData: [],
      imgBaseUrl: process.env.VUE_APP_BASE_API,
      isBack: Boolean(this.$route.query.isBack)
    }
  },
  activated() {
    if (this.$route.params.isRefresh) {
      this.getTableData()
    }
  },
  created() {
    this.init()
  },
  methods: {
    paginationChange(obj) {
      this.queryParams.pageIndex = obj.page
      this.queryParams.pageSize = obj.limit
      this.getTableData()
    },
    searchData(val) {
      val.pageSize = this.queryParams.pageSize
      val.pageIndex = 1
      this.getTableData(val)
    },
    init() {
      app().then(res => {
        this.conditionList[1].options = res.data.data.map((item) => { return { label: item.appname, value: item.appid } })
      })
      appSet().then(res => {
        this.conditionList[0].options = res.data.data.map((item) => { return { label: item.appname, value: item.appid } })
      })
    },
    add() {
      this.$router.push({
        path: '/AccessManagement/EditAppAndModule',
        query: {
          name: '新增接入应用及模块信息'
        }
      })
    },
    handleEdit(row) {
      for (var item in this.queryParams) {
        sessionStorage.setItem(item, this.queryParams[item])
      }
      this.$router.push({
        path: '/AccessManagement/EditAppAndModule',
        query: {
          id: row.id
        }
      })
    },
    handleStatus(row, status) {
      this.params = {
        id: row.id,
        status: status
      }
      if (status === 0) {
        this.$refs.dialog.setDialogVisible(true)
      } else {
        this.statusChange(this.params)
      }
    },
    statusChange(params) {
      enable(params).then(() => {
        this.getTableData()
      })
    },
    getTableData(val) {
      this.loading = true
      if (val) { this.queryParams = val }
      list(this.queryParams).then((res) => {
        const data = res.data.data
        this.tableData = data.records
        this.total = data.total
        this.loading = false
      })
    },
    resetCondition() {
      this.$refs.sortDialog.resetQueryParams()
      this.getTableData()
    }
  }
}
</script>

  <style lang="scss" scoped>
  ::v-deep .menu-page {
    display: flex;

    .menu-title {
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #333333;
      line-height: 24px;
      font-weight: 600;
      padding-left: 16px;
    }
    .menu-left{
      width: 290px;
      .menu-title{
        padding-left: 0;
      }
    }
  }
  .common-btn {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    cursor: pointer;
  }
  .common-btn + .common-btn {
    margin-left: 16px;
  }
  .c-blue {
    color: #418CFF;
  }
  .c-red {
    color: #FF2F2F;
  }
  .flex-box{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 15px;
    position: relative;
    .el-button{
      width: auto;
      margin-left: 20px;
    }
    .search-tips {
      position: absolute;
      top: 10px;
      left: 2px;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      font-weight: 400;
    }
  }
  .el-button--primary, .el-button--primary:focus, .el-button--primary:hover{
    background-color: #0368d1;
    border-color: #0368d1;
  }
  .blue-label{
    display: inline-block;
    font-size: 12px;
    color: #3271F0;
    padding: 5px 10px;
    background: #E2F1FF;
    border-radius: 2px;
  }
  .green-label{
    display: inline-block;
    font-size: 12px;
    color: #48BF30;
    padding: 5px 10px;
    background: #ECFAEA;
    border-radius: 2px;
  }
  .yellow-label{
    display: inline-block;
    font-size: 12px;
    color:  #FB9A17;
    padding: 5px 10px;
    background: #FFF4DE;
    border-radius: 2px;
  }
  .have-icon{
    padding-left: 20px;
    position: relative;
  }
  .have-icon::before{
    position: absolute;
    top: 5px;
    left: 0;
    content: ' ';
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .red-icon::before{
    border: 2px solid #d9e8ff;
    background: #FF2F2F;
  }
  .green-icon::before{
    border: 2px solid #d8f3cd;
    background: #3ec504;
  }
  .btn-group{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>

